<template>
  <div class="alarmInfo">
    <!-- 筛选条件 -->
    <ContentWrap>
      <el-form
        ref="queryFormRef"
        class="-mb-15px"
        :model="queryParams"
        :inline="false"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="报警类型" prop="alarmType">
              <el-select v-model="queryParams.alarmType" placeholder="请选择报警类型" clearable>
                <el-option
                  v-for="dict in getIntDictOptions(DICT_TYPE.ALARM_TYPE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名" prop="patientName">
              <el-input v-model="queryParams.patientName" placeholder="请输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号码" prop="idNumber">
              <el-input v-model="queryParams.idNumber" placeholder="请输入身份证号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="医院" prop="deptName">
              <el-input
                v-model="queryParams.deptName"
                placeholder="请输入医院名称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
        <el-col :span="6" class="text-right">
            <el-form-item>
              <el-button
                type="primary"
                @click="handleQuery"
                v-hasPermi="['patients:alarmInfo:query']"
                >查询</el-button
              >
              <el-button @click="resetQuery">重置</el-button>
              <!-- <el-button type="primary" @click="sendAll" v-hasPermi="['patients:alarmInfo:send']">
                一键发送
              </el-button> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <div class="content">
        <!-- 区域树 -->
        <div class="tree-box">
          <RegionTree v-model:checkedKeys="selectedKeys" :isExpand="true" :checkStrictly="false" />
        </div>
        <div style="width: 80%; height: calc(100vh - 265px)">
          <el-table
            size="large"
            v-loading="loading"
            :data="lists"
            border
            style="width: 100%"
            height="90%"
          >
            <!-- 序号 -->
            <el-table-column type="index" label="序号" width="80" align="center" fixed />
            <el-table-column
              label="患者编号"
              prop="patientCode"
              width="200"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="姓名"
              prop="patientName"
              width="110"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="年龄"
              prop="age"
              width="80"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column label="性别" prop="gender" width="80" align="center">
              <template #default="scope">
                {{ getDictLabel(DICT_TYPE.GENDER, scope.row.gender) }}
              </template>
            </el-table-column>
            <el-table-column
              label="证件号"
              prop="idNumber"
              width="220"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="医院"
              prop="deptName"
              width="230"
              show-overflow-tooltip
              align="center"
            />
            <!-- <el-table-column
              label="联系人"
              prop="contactName"
              width="230"
              show-overflow-tooltip
              align="center"
            />
                        <el-table-column
              label="联系电话"
              prop="contactPhone"
              width="230"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="住址"
              prop="currentAddress"
              width="150"
              align="center"
            /> -->
            <!-- <el-table-column
              label="末次随访日期"
              prop="lastFollowUpDate"
              width="150"
              align="center"
            >
              <template #default="scope">
                {{ formatDate(scope.row.lastFollowUpDate, 'YYYY-MM-DD') }}
              </template>
            </el-table-column> -->
            <el-table-column
              label="下次随访日期"
              prop="nextFollowUpDate"
              width="150"
              align="center"
            >
              <template #default="scope">
                {{ formatDate(scope.row.nextFollowUpDate, 'YYYY-MM-DD') }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center" fixed="right">
              <template #default="scope">
                <el-button
                  v-hasPermi="['patients:alarmInfo:detail']"
                  type="primary"
                  link
                  @click="detail(scope.row.patientCode)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getLists"
          />
        </div>
      </div>
    </ContentWrap>
    <AlarmInfoDetail ref="alarmInfoDetailRef" />
  </div>
</template>

<script lang="ts" setup name="AlarmInfo">
import * as AlarmInfoApi from '@/api/patient/alarmInfo'
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import AlarmInfoDetail from './components/alarmInfoDetail.vue'
// 选中的节点 ID
const selectedKeys = ref<string[]>([])
const queryParams = reactive({
  alarmType:1,
  patientName: undefined,
  idNumber: undefined,
  deptName: undefined,
  deptIds: [],
  pageNo: 1,
  pageSize: 10
})

const loading = ref(true) // 列表的加载中
const lists = ref<any[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getLists = async () => {
  loading.value = true
  try {
    const data = await AlarmInfoApi.getAlarm(queryParams)
    lists.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 查询按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getLists()
}

/** 重置按钮操作 */
const resetQuery = () => {
  //form表单重置
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 一键发送按钮操作 */
const sendAll = () => {}
const sendEmail = async (id: number) => {
  getLists()
}

const alarmInfoDetailRef = ref()
const detail = async (patientCode: string) => {
  alarmInfoDetailRef.value.open(patientCode)
}

onMounted(() => {
  getLists()
})
// 监听勾选的值
watch(selectedKeys, (newCheckedKeys) => {
  queryParams.deptIds = newCheckedKeys // 更新queryParams中的值
  handleQuery()
})
</script>

<style lang="scss" scoped>
.content {
  display: flex;
}
.tree-box {
  width: 330px;
  height: calc(100vh - 265px);
  overflow: auto;
  margin-right: 16px;
}
.text-right {
  display: flex;
  justify-content: flex-start;
}
</style>
